<template>
  <div class="password-edit page" ref="webview">
    <div ref="wrapper">
      <van-nav-bar :title="type === 1 ? '修改密码': '支付密码'" class="bg_white" left-arrow @click-left="$router.go(-1)" />
      <div class="password">
        <van-field v-model.number="form.mobile" clearable type="tel" maxlength="11" label="手机号" placeholder="请输入手机号码" />
        <van-field v-model="form.code" center clearable maxlength="4" label="验证码" placeholder="请输入验证码">
          <span slot="button" class="code" :class="{disable: !disable}" @click="getCode">{{count?count + 's': codeText}}</span>
        </van-field>
        <van-field v-model="form.password" :maxlength="type === 2?6:20" type="password" label="新密码" placeholder="请输入新密码" />
        <van-field v-model="form.confPass" :maxlength="type === 2?6:20" type="password" label="确认密码" placeholder="再次确认密码" />
      </div>
      <div class="addCard">
        <van-button color="#ff0034" class="btn" :loading="isLoading" @click.native="submitEdit">确认修改</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'passwordEdit',
  data () {
    return {
      text: '',
      isLoading: false,
      disable: true,
      confirmPpassword: '',
      colde: '',
      codeText: '发送验证码',
      count: '',
      timer: null,
      form: {
        mobile: '',
        password: '',
        confPass: '',
        code: '',
        type: this.$route.query.type + '' // 密码类型
      }
    };
  },
  created () {
    this.form.mobile = this.userInfo.mobile;
  },
  computed: {
    ...mapGetters(['userInfo']),
    type () {
      return parseInt(this.$route.query.type);
    }
  },
  methods: {
    getSMS () {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.disable = false;
        this.timer = setInterval(() => {
          this.count && (this.codeText = '重新获取');
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.disable = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    // 获取验证码
    getCode () {
      var isPhone = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile));
      if (isPhone) {
        this.$toast('请输入正确的手机号!');
        return;
      }
      if (!this.disable) {
        return;
      }
      // this.getSMS();
      this.$API.user.sendMsg({
        mobile: this.form.mobile + '',
        type: 5
      }).then(res => {
        if (res.code === -1) {
          this.$toast(res.message);
        } else {
          this.getSMS();
          this.$toast('验证码发送成功,请注意查收');
        }
      });
    },
    submitEdit () {
      if (this.isLoading) {
        return;
      }
      var disabled = !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile));
      if (disabled) {
        // this.$toast.loading();
        this.$toast('请输入正确的手机号!');
        return;
      }
      var _account = this.form.mobile + '';
      var _password = this.form.password + '';
      if (!_account) {
        this.$toast('手机号不能为空');
        return;
      }
      if (!this.form.code) {
        this.$toast('验证码不能为空');
        return;
      }
      if (!_password) {
        this.$toast('密码不能为空');
        return;
      }
      if (!this.form.confPass) {
        this.$toast('确认密码不能为空');
        return;
      }
      if (this.form.password !== this.form.confPass) {
        this.$toast('两次密码输入的不一致!');
        return;
      }
      // debugger;
      var options = this.form;
      this.isLoading = true;
      this.$API.user.updatePass(options).then((res) => {
        if (!res.code) {
          this.$toast('修改成功!');
          this.type === 2 && this.$store.dispatch('setUserInfo'); // 更新密码判断
          this.$router.go(-1);
        }
        this.isLoading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.password-edit {
  .textName {
    background-color: #f1f3f7;
    line-height: 76px;
    padding: 0 40px;
    color: #252525;
  }
  .code {
    background: #ff0034;
    border-radius: 50px;
    font-size: 24px;
    padding: 5px 20px;
    display: inline-block;
    color: #fff;
  }
  .code.disable {
    background-color: #bbb;
  }
  .password {
    margin-top: 20px;
  }
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    position: fixed;
    bottom: calc(30px + env(safe-area-inset-bottom));
    left: 40px;
    right: 40px;
    .btn {
      width: 100%;
      border-radius: 10px;
    }
    .van-button__text {
      color: #fff;
      font-size: 32px;
      &::before {
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>
